<template>
  <div>
    <fieldset>
      <legend>基本信息:</legend>
      姓氏： <input type="text" v-model="user.firstName" /> <br />
      名字： <input type="text" v-model="user.lastName" />
    </fieldset>
    <fieldset>
      <legend>基本信息</legend>
      名字： <input type="text" v-model="fullName" /> <br />
      名字： <input type="text" v-model="fullName2" /> <br />
      名字： <input type="text" v-model="fullName3" /><br />
      名字： <input type="text" v-model="fullName4" /><br />
    </fieldset>
  </div>
</template>
<script lang="ts">
import {
  defineComponent,
  ref,
  computed,
  reactive,
  watch,
  watchEffect,
} from "vue";
export default defineComponent({
  name: "watchAndCal", // 计算属性和监视属性
  setup() {
    // user 对象
    const user = reactive({
      firstName: "东方",
      lastName: "不败",
    });
    // 计算属性 1
    const fullName = computed(() => {
      return user.firstName + "_" + user.lastName;
    });
    // 计算属性 2
    const fullName2 = computed({
      get() {
        console.log("fullName2 get");
        return user.firstName + "_" + user.lastName;
      },
      set(value: string) {
        console.log("fullName2 set");
        const names = value.split("-");
        user.firstName = names[0];
        user.lastName = names[1];
      },
    });
    // 监视属性
    const fullName3 = ref("");
    // watch(user, () => {
    //   fullName3.value = user.firstName + "_" + user.lastName;
    // });
    // 解构写法
    // immediate 为 true， 表示默认开始立即执行
    // deep 为 true， 表示开启深度监视
    watch(
      user,
      ({ firstName, lastName }) => {
        fullName3.value = firstName + "_" + lastName;
      },
      { immediate: true, deep: true }
    );

    const fullName4 = ref("");
    // 相等于默认 immediate:true, 即开始就执行
    watchEffect(() => {
      fullName4.value = user.firstName + "_" + user.lastName;
    });

    // watch 可以监视多个属性
    //注意： 监视的属性为非响应式数据，则必须通过回调函数方式的进行属性监视
    watch([() => user.firstName, () => user.lastName], () => {
      console.log("watch 可以监视多个属性 ....");
    });

    return {
      user,
      fullName,
      fullName2,
      fullName3,
      fullName4,
    };
  },
});
</script>
